<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div class="content-body">
  <h2>
    <span openlmis-message="header.demographic.facility"></span>
  </h2>
</div>
<div>
  <div openlmis-message="header.demographic.estimates.facility.page.info"></div>
  <div class="clearfix padding2px"></div>
  <div class="form-inline">
    <div class="pull-right checkbox">
      <label>
        <input ng-model="autoCalculate" type="checkbox">
        <span openlmis-message="label.demographic.estimate.auto.calculate"></span>
      </label>
    </div>
    <div class="pull-left padding2px">
      <label openlmis-message="label.program"></label>
      <select style="width:200px"  ui-select2="{dropdownAutoWidth : true}" ng-model="program" ng-change="onParamChanged()">
        <option ng-repeat="p in programs" value="{{p.id}}">{{p.name}}</option>
      </select>
    </div>
    <div class="form-inline padding2px">
      <label>
        <span openlmis-message="label.demographic.parameter.year"></span>
      </label>
      <select style="width:200px" ui-select2="{dropdownAutoWidth : true}" ng-change="onParamChanged();" ng-model="year" placeholder="year">
        <option ng-repeat="y in years" ng-selected="year == y" value="{{y}}">{{y}}</option>
      </select>
    </div>
  </div>
  <div class="clearfix padding2px"></div>
  <div>
    <div class="parent">
      <table class="table table-bordered scrollable">
        <thead>
          <tr class="gradient-header">
            <th class="span1">
              <span openlmis-message="label.demographic.facility.code"></span>
            </th>
            <th class="span3">
              <span openlmis-message="label.demographic.facility.name"></span>
            </th>
            <th ng-repeat="category in categories">
              {{category.name}}
            </th>
          </tr>
        </thead>
        <tbody>
        <tr ng-repeat-start="facility in form.estimateLineItems"></tr>
        <tr class="gradient-header"  ng-show="showParent($index)">
          <th colspan="2">{{facility.parentName}}</th>
          <th class="number" ng-repeat="category in categories">
            {{districtSummary.getSummary(facility.parentId, category, year) | number : 0}}
          </th>
        </tr>
        <tr ng-repeat-end>
            <td class="cell-input">
              <span class="cell-text">{{facility.code}}</span>
            </td>
            <td class="cell-input">
              <span class="cell-text">
                {{facility.name}}
              </span>
            </td>
            <td class="cell-input number" ng-repeat="category in categories" class="number">
              <span class="ng-scope" ng-if="category.isPrimaryEstimate">
                <span class="position-relative ng-scope">
                  <input
                    ng-disabled="facility.getByCategory(category, year).isFinal"
                    class="number numeric-input"
                    maxlength="8"
                    ng-change="facility.populationChanged(autoCalculate)"
                    ng-model="facility.getByCategory(category, year).value"
                    numeric-validator="positiveInteger"
                    type="text"/>
                </span>
              </span>
              <span class="ng-scope" ng-if="!category.isPrimaryEstimate">
                <span class="position-relative ng-scope">
                  <input
                    ng-disabled="facility.getByCategory(category, year).isFinal"
                    class="number numeric-input"
                    maxlength="8"
                    ng-model="facility.getByCategory(category, year).value"
                    numeric-validator="positiveInteger"
                    type="text"/>
                </span>
              </span>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
    <openlmis-pagination num-pages="pageCount" current-page="currentPage" max-size="10"
                         check-error-on-page="checkErrorOnPage(page)"></openlmis-pagination>
  </div>
  <div class="action-buttons" form-toolbar id="action_buttons">
    <div class="form-cell button-row">
      <input
        ng-disabled="isFinalized"
        class="btn btn-primary save-button"
        id="saveButton"
        ng-click="save()"
        openlmis-message="button.save"
        type="submit"/>
      <input
        ng-disabled="isFinalized"
        ng-show="hasPermission('FINALIZE_DEMOGRAPHIC_ESTIMATES')"
        class="btn btn-primary save-button"
        id="finalizeButton"
        ng-click="finalize()"
        openlmis-message="button.finalize"
        type="submit"/>
      <input
        ng-disabled="!isFinalized"
        ng-show="hasPermission('UNLOCK_FINALIZED_DEMOGRAPHIC_ESTIMATES')"
        class="btn btn-primary save-button"
        id="undoFinalizeButton"
        ng-click="undoFinalize()"
        openlmis-message="button.undo.finalize"
        type="submit"/>
      <input
        class="btn btn-cancel cancel-button"
        id="cancelButton"
        ng-click="cancel()"
        openlmis-message="button.cancel"
        type="button"/>
    </div>

    <div class="toolbar-error" id="saveErrorMsgDiv">
      <span ng-show="error" openlmis-message="error"></span>&nbsp;
      <span ng-bind="errorProgram" ng-show="errorProgram"></span>
    </div>
    <div class="toolbar-success" id="saveSuccessMsgDiv" ng-show="message" openlmis-message="message"></div>
  </div>
</div>
